<template>
    <!-- 人员管理-报警记录 -->
    <div class="empWarnrecord">
        <div class="search">
            <div class="left">
                <Tabs v-model="tabActiveName"  @on-click="setTabClick">
                    <TabPane :label="`待处理（${isCount>99?'99+':isCount}）`" name="0"></TabPane>
                    <TabPane :label="`已处理（${count>99?'99+':count}）`" name="1"></TabPane>
                </Tabs>
            </div>
            <div class="right">
                <DatePicker type="daterange" :options="options" :clearable="false" v-model="dateArr" v-if="inputShow" format="yyyy-MM-dd" placement="top" transfer  placeholder="请选择日期" style="width: 300px;" @on-change="getDateArr" ></DatePicker>
                <DatePicker type="daterange" format="yyyy-MM-dd" placement="top"  placeholder="请选择日期" v-if="inputShow" style="opacity:0;position: absolute;top:-9999px;width:1px;"></DatePicker>
                <el-button type="primary" size="small"  plain style="margin-left:20px" v-if="handleType" :disabled="warnIdList.length == 0 || !btnList.includes('emp/warnRecord/deal')" @click="allhandle">批量处理</el-button>
            </div>
        </div>
        <div class="lineBc"></div>
        <div class="tabBox">
            <div class="boxList">
                <div  :class="['item' , empRuleType == item.id ? 'machRuleType' : '']" @click="warnActiveFn(item.id)" v-for="(item ,index ) in ruleTypeList" :key="index">
                    <div class="left">
                        <img :src="item.img" />
                    </div>
                    <div class="right">
                        <div class="p">{{item.name}}</div>
                        <div class="p"><span class="num">{{item.num}}</span> <span>次</span></div>
                    </div>
                </div>
            </div>
            <div class="tableList">
                <el-table :data="list" style="width: 100%" :stripe="true" @row-click="getHandleDetails" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" > </el-table-column>
                    <el-table-column fixed="left" prop="triggerTime" label="报警时间" width="200px"></el-table-column>
                    <el-table-column prop="empName" label="报警人员姓名"></el-table-column>
                    <el-table-column prop="workTypeName" label="工种"></el-table-column>
                    <el-table-column prop="ruleType" label="报警类型">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ruleType == 101">跌落报警</span>
                            <!-- <span v-if="scope.row.ruleType == 102">摔倒报警</span> -->
                            <span v-if="scope.row.ruleType == 103">脱帽报警</span>
                            <span v-if="scope.row.ruleType == 104">SOS报警</span>
                            <span v-if="scope.row.ruleType == 105">碰撞报警</span>
                            <span v-if="scope.row.ruleType == 106">静止报警</span>
                            <span v-if="scope.row.ruleType == 201">出区域报警</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="groupName" label="班组"></el-table-column>
                    <el-table-column prop="handleTime" label="处理时间" v-if="state == 1" width="200px"></el-table-column>
                    <el-table-column prop="handleUserName" label="处理人" v-if="state == 1"></el-table-column>
                    <el-table-column fixed="right" label="操作" width="120px" align="center">
                        <template slot-scope="scope">
                            <el-button v-if="state == 1" @catch.native.prevent="handle( scope.$index, list)" type="text" size="small" v-preventReClick="1500">查看详情</el-button>
                            <el-button v-if="state == 0" @catch.native.prevent="handle( scope.$index, list)" type="text" size="small" :disabled="!btnList.includes('emp/warnRecord/dealSingle')" v-preventReClick="1500">处理</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="clearfix"   >
                <div class="float-right">
                    <Page v-if="totalCount" style="margin: 20px 0;text-align: center;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                </div>
            </div>
        </div>

        <Modal v-model="handleModal" width="800px" :mask-closable="false" :title="isAdd ? '报警信息处理' : '报警信息详情'" class-name="msgModal empMsgModal">
            <div class="msgBox">
                <div class="info">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>人员信息</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left">
                            <div class="list">
                                <div class="item">
                                    <span class="span">人员名称:</span>
                                    <span class="span">{{empName }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item">
                                    <span class="span">工种:</span>
                                    <span class="span">{{workTypeName }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警规则</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%">
                            <div class="list">
                                <div class="item">
                                    <span class="span">报警类型:</span>
                                    <span class="span" v-if="ruleType == 101">跌落报警</span>
                                    <!-- <span class="span" v-if="ruleType == 102">摔倒报警</span> -->
                                    <span class="span" v-if="ruleType == 103">脱帽报警</span>
                                    <span class="span" v-if="ruleType == 104">SOS报警</span>
                                    <span class="span" v-if="ruleType == 105">碰撞报警</span>
                                    <span class="span" v-if="ruleType == 106">静止报警</span>
                                    <span class="span" v-if="ruleType == 201">出区域报警</span>
                                </div>
                            </div>
                            <div class="list" style="width:100%">
                                <div class="item" style="width:100%">
                                    <span class="span">报警规则:</span>
                                    <span class="span" v-if="ruleType == 101">人员高空跌落</span>
                                    <span class="span" v-if="ruleType == 102">人员摔倒</span>
                                    <span class="span" v-if="ruleType == 103">人员脱下安全帽</span>
                                    <span class="span" v-if="ruleType == 104">人员SOS呼叫</span>
                                    <span class="span" v-if="ruleType == 105">人员发生碰撞</span>
                                    <span class="span" v-if="ruleType == 106">人员原地静止不动</span>
                                    <el-button type="primary" @click="searchGps" size="small"  v-show="ruleType == 201" style="padding:5px 15px;border-radius:15px;"><span style="color:#fff;">点击查看区域范围</span></el-button>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item operatorList"  v-if="timeList.length>0">
                                    <span class="span">生效时间:</span>
                                    <span class="span" style="margin-right:20px;" v-for="(val, i) in timeList" :key="i">{{ val.startTime }}--{{ val.endTime }}</span>
                                </div>
                                <div class="item operatorList"  v-if="timeList.length==0">
                                    <span class="span">生效时间:</span>
                                    <span class="span">00:00--23:59</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警信息</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%;">
                            <div class="list">
                                <div class="item">
                                    <span class="span">报警时间:</span>
                                    <span class="span">{{triggerTime }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item" style="width:70%">
                                    <span class="span">报警地点:</span>
                                    <span class="span">{{ads }}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item operatorList" style="align-items: flex-start;">
                                    <span class="span">报警详情:</span>
                                    <div v-show="ruleType == 201" style="width:600px;height:300px;border:1px solid var(--themeColor);">
                                        <div id="fenceMap2" class="fenceMap"></div>
                                    </div>
                                    <span class="span" v-if="ruleType == 101">人员高空跌落</span>
                                    <span class="span" v-if="ruleType == 102">人员摔倒</span>
                                    <span class="span" v-if="ruleType == 103">人员脱下安全帽</span>
                                    <span class="span" v-if="ruleType == 104">人员SOS呼叫</span>
                                    <span class="span" v-if="ruleType == 105">人员发生碰撞</span>
                                    <span class="span" v-if="ruleType == 106">人员原地静止不动</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警处理</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%;">
                            <div class="list" v-if="!isAdd">
                                <div class="item">
                                    <span class="span">处理人:</span>
                                    <span class="span">{{handleUserName}}</span>
                                </div>
                            </div>
                            <div class="list" v-if="!isAdd">
                                <div class="item">
                                    <span class="span">处理时间:</span>
                                    <span class="span">{{handleTime}}</span>
                                </div>
                            </div>
                            <div class="list">
                                <div class="item" style="width:100%;">
                                    <i class="tip" v-if="isAdd">*</i>
                                    <span class="span" >报警原因:</span>
                                    <span class="span" style="width:500px;white-space:normal;word-wrap: break-word;" v-if="!isAdd">{{handleRemark}}</span>
                                </div>
                            </div>
                            <div class="list inputMsg" v-if="isAdd">
                                <div class="item" style="width:100%;">
                                    <el-input  v-model="handleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width:100%;margin:0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                            <div class="list" >
                                <div class="item" style="width:100%;">
                                    <i class="tip" v-if="isAdd">*</i>
                                    <span class="span" >处理结果:</span>
                                    <span class="span" style="width:500px;;white-space:normal;word-wrap: break-word;" v-if="!isAdd">{{handleResult}}</span>
                                </div>
                            </div>
                            <div class="list inputMsg" v-if="isAdd">
                                <div class="item" style="width:100%;">
                                    <el-input v-model="handleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 100%;margin: 0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(0)" style="padding:7px 25px;border-radius: 15px;background:var(--themeColor2);border:1px solid var(--themeColor1);" type="info" size="mini" v-if="isAdd"><span style="color:var(--themeColor);">取消</span> </el-button>
                <el-button @click="ok(0)" type="primary"  style="padding:7px 25px;border-radius: 15px;" size="mini" v-if="isAdd"  v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>

        <Modal v-model="Modal" title="报警信息处理" width="360px;" :mask-closable="false" class-name="msgModal empMsgModal">
            <p style="width:100%;text-align:center;color:red;">
                处理消息一旦确认，就无法更改！
            </p>
            <div style="width:100%;text-align:center;font-size:16px;color:red;">
                您是否确认处理结果？
            </div>
            <div slot="footer">
                <el-button @click="cancel(1)" style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini"><span style="color:#1891FF;">取消</span> </el-button>
                <el-button @click="submit" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891FF;border:1px solid #1891FF;" size="mini"   v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>

        <Modal v-model="allhandleModal" width="800px" :mask-closable="false" title="批量处理" class-name="msgModal">
            <div class="msgBox">
                <div class="info" style="margin-top:20px;">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警处理</span>
                        </h2>
                    </div>
                    <div class="infoBox">
                        <div class="left" style="width:100%;">
                            <div class="list">
                                <div class="item" style="width:100%;">
                                    <i class="tip"  style="color:red">*</i>
                                    <span class="span" >报警原因:</span>
                                </div>
                            </div>
                            <div class="list inputMsg">
                                <div class="item" style="width:100%;">
                                    <el-input  v-model="allhandleRemark" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width:100%;margin:0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                            <div class="list" >
                                <div class="item" style="width:100%;">
                                    <i class="tip"  style="color:red">*</i>
                                    <span class="span" >处理结果:</span>
                                </div>
                            </div>
                            <div class="list inputMsg" >
                                <div class="item" style="width:100%;">
                                    <el-input v-model="allhandleResult" type="textarea" placeholder="请输入内容" maxlength="100" show-word-limit style="width: 100%;margin: 0 auto;font-size:14px"></el-input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(3)" style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini" ><span style="color:var(--themeColor);">取消</span> </el-button>
                <el-button @click="ok(1)" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891FF;border:1px solid #1891FF;" size="mini"   v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>

        <Modal v-model="GPSModal" title="查看范围区域" width="1000px" :mask-closable="false" :footer-hide="true" class-name="msgModal">
            <div class="msg">
                <div style="width:900px;height:500px;margin:20px auto;border:1px solid #1891FF;">
                    <div id="container2" class="container"></div>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>

import {
    getEmpRecordList,
    getEmpRecordDetail,
    getEmpRecordHandle,
    getEmpRecordBatchHandle,
    getEmpRecordNum
} from "@/api/api.js";
import {formatDate, initYMD} from '@/sever/utils.js'
export default {
    data() {
        return {
            tabActiveName: '0',
            options: {
                disabledDate(date) {
                    return date > Date.now();
                }
            },
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: 0,
            list: [],
            flag: true,
            state: 0,
            handleModal: false,
            isAdd: false,
            // 报警详情信息
            handleRemark: "",
            handleResult: "",
            handleTime: "",
            handleUserName: "",
            empName: "",
            workTypeName: "",
            ruleType: "",
            type: "",
            timeList: [],
            triggerTime: "",
            triggerValue: "",
            ads: "",
            warnId: "",
            // ---
            Modal: false,
            count: 0,
            isCount: 0,
            deptId: "",
            ruleTypeList: [
                {
                    id: 100,
                    name: "总报警次数",
                    img: require("./../../assets/images/emp/warn/emp_allWran.png"),
                    num: 0
                },
                {
                    id: 101,
                    name: "跌落报警",
                    img: require("./../../assets/images/emp/warn/emp_DLWarn.png"),
                    num: 0
                },
                // {
                //     id: 102,
                //     name: "摔倒报警",
                //     img:require("./../../assets/images/emp/warn/emp_SDWarn.png"),
                //     num:0
                // },
                {
                    id: 103,
                    name: "脱帽报警",
                    img: require("./../../assets/images/emp/warn/emp_AQMWarn.png"),
                    num: 0
                },
                {
                    id: 104,
                    name: "SOS报警",
                    img: require("./../../assets/images/emp/warn/emp_sosWarn.png"),
                    num: 0
                },
                // {
                //     id: 105,
                //     name: "碰撞报警",
                //     img: require("./../../assets/images/emp/warn/emp_PZWarn.png"),
                //     num: 0
                // },
                {
                    id: 106,
                    name: "静止报警",
                    img: require("./../../assets/images/emp/warn/emp_JZWarn.png"),
                    num: 0
                },
                {
                    id: 201,
                    name: "出区域",
                    img: require("./../../assets/images/emp/warn/mach_qy.png"),
                    num: 0
                },
            ],
            empRuleType: 100,
            inputShow: false,
            dateArr: [],
            warnIdList: [],
            allhandleModal: false,
            allhandleRemark: "",
            allhandleResult: "",
            handleFlag: false,
            handleType: true,
            GPSModal: false,
            btnList:[],
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.empRuleType = 100;
                this.pageNum = 1;
                this.current = 1;
                this.dateArr = [];
                this.initDate();
            }
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.initDate();
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        setTimeout(() => {
            this.inputShow = true;
        }, 1)
    },
    methods: {
        searchGps() {
            var _that = this;
            _that.GPSModal = true;
            if (_that.type == 1) {
                var polygonPointList = _that.pointList;
                var a = [];
                var b = [];
                var path = [];
                for (let i in polygonPointList) {
                    a.push(polygonPointList[i].lat);
                    b.push(polygonPointList[i].lng);
                    //多边形的坐标点
                    let x = [polygonPointList[i].lng, polygonPointList[i].lat];
                    path.push(x);
                }
                let latSum = 0;
                for (let i in a) {
                    latSum += a[i];
                }
                var lat = latSum / a.length;
                let lngSum = 0;
                for (let i in b) {
                    lngSum += b[i];
                }
                var lng = lngSum / b.length;
                var polygon = new AMap.Polygon({
                    path: path,
                    strokeColor: "#ff00ff",
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    fillColor: "#ff00ff",
                    zIndex: 50
                });
                var map = new AMap.Map("container2", {
                    zoom: 14,
                    center: [lng, lat]
                });
            } else if (_that.type == 2) {
                var lat = _that.centerPoint.lat;
                var lng = _that.centerPoint.lng;
                var radius = _that.radius;
                var circle = new AMap.Circle({
                    center: [lng, lat],
                    radius: radius, //半径
                    borderWeight: 3,
                    strokeColor: "#ff00ff",
                    strokeWeight: 6,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    strokeStyle: "dashed",
                    strokeDasharray: [10, 10],
                    // 线样式还支持 'dashed'
                    fillColor: "#ff00ff",
                    zIndex: 50
                });
                var map = new AMap.Map("container2", {
                    zoom: 14,
                    center: [lng, lat]
                });
            }
            var mouseTool = new AMap.MouseTool(map);
            // 构造官方卫星、路网图层
            var satelliteLayer = new AMap.TileLayer.Satellite();
            var roadNetLayer = new AMap.TileLayer.RoadNet();
            //添加图层
            map.add([satelliteLayer, roadNetLayer]);
            if (_that.type == 1) {
                map.add(polygon);
                // 缩放地图到合适的视野级别
                map.setFitView([polygon]);
            } else if (_that.type == 2) {
                // circle.setMap(map);
                map.add(circle);
                // 缩放地图到合适的视野级别
                map.setFitView([circle]);
            }
        },
        initDataFn() {
            this.getIsCountFn();
            this.getCountFn();
        },
        //获取待整改
        getIsCountFn() {
            let parmas = {
                deptId: this.deptId,
                state: 0,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startDate: initYMD(this.dateArr[0]),
                endDate: initYMD(this.dateArr[1])
            };
            getEmpRecordList(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.isCount = res.data.total;
                        if (this.state == 0) {
                            this.totalCount = res.data.total;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取已整改
        getCountFn() {
            let parmas = {
                deptId: this.deptId,
                state: 1,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                startDate: initYMD(this.dateArr[0]),
                endDate: initYMD(this.dateArr[1])
            };
            getEmpRecordList(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.count = res.data.total;
                        if (this.state == 1) {
                            this.totalCount = res.data.total;
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        warnActiveFn(num) {
            this.empRuleType = num;
            if (this.tabActiveName === '0') {
                this.gethandle();
            } else if (this.tabActiveName === "1") {
                this.getYhandle();
            }
        },
        setTabClick(name) {
            if (name === '0') {
                this.gethandle();
                this.handleType = true;
            } else if (name === "1") {
                this.getYhandle();
                this.handleType = false;
            }
            this.getEmpRecordNumFn();
        },
        //获取列表
        getAllList() {
            this.totalCount = '';
            let parmas = {
                deptId: this.deptId,
                state: this.state,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ruleType: this.empRuleType == 100 ? '' : this.empRuleType,
                startDate: initYMD(this.dateArr[0]),
                endDate: initYMD(this.dateArr[1])
            };
            getEmpRecordList(parmas)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getEmpRecordNumFn() {
            let parmas = {
                deptId: this.deptId,
                state: this.state,
                startDate: initYMD(this.dateArr[0]),
                endDate: initYMD(this.dateArr[1])
            };
            getEmpRecordNum(parmas)
                .then(res => {
                    if (res.code == 200) {
                        let list = res.data.warnEmpNum;
                        this.ruleTypeList.forEach(v => {
                            v.num = 0;
                            if (v.id == 100) {
                                v.num = res.data.total;
                            }
                            list.forEach(item => {
                                if (v.id == item.ruleType) {
                                    v.num = item.num;
                                }
                            })
                        })
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        getDateArr(i, v) {
            this.dateArr = i;
            this.initDataFn();
            this.getAllList();
            this.getEmpRecordNumFn();
        },
        gethandle() {
            this.flag = true;
            this.list = [];
            this.state = 0;
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        getYhandle() {
            this.flag = false;
            this.list = [];
            this.state = 1;
            this.pageNum = 1;
            this.current = 1;
            this.getAllList();
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        /* 详情 */
        getHandleDetails(row) {
            this.warnId = row.warnId;
            this.getDetails(row.warnId);
        },
        handle(index, rows) {
            this.warnId = rows[index].warnId;
            this.getDetails(rows[index].warnId);
        },
        getDetails(id) {
            let params = {
                warnId: id
            };
            getEmpRecordDetail(params)
                .then(res => {
                    if (res.code == 200) {
                        if (res.data.handleState == 1) {
                            this.handleRemark = res.data.handleRemark;
                            this.handleResult = res.data.handleResult;
                            this.isAdd = false;
                        } else if (res.data.handleState == 0) {
                            this.handleRemark = "";
                            this.handleResult = "";
                            this.isAdd = true;
                        }
                        this.handleModal = true;
                        this.handleTime = res.data.handleTime;
                        this.handleUserName = res.data.handleUserName;
                        this.empName = res.data.empName;
                        this.workTypeName = res.data.workTypeName;
                        this.ruleType = res.data.ruleType;
                        this.type = res.data.type;
                        this.pointList = res.data.polygonPointList;
                        this.centerPoint = res.data.centerPoint;
                        this.radius = res.data.radius;
                        this.timeList = res.data.timeList;
                        this.triggerTime = res.data.triggerTime;
                        var _that = this;
                        if (this.ruleType == 201) {
                            if (_that.type == 1) {
                                var polygonPointList = _that.pointList;
                                var a = [];
                                var b = [];
                                var path = [];
                                for (let i in polygonPointList) {
                                    a.push(polygonPointList[i].lat);
                                    b.push(polygonPointList[i].lng);
                                    //多边形的坐标点
                                    let x = [
                                        polygonPointList[i].lng,
                                        polygonPointList[i].lat
                                    ];
                                    path.push(x);
                                }
                                let latSum = 0;
                                for (let i in a) {
                                    latSum += a[i];
                                }
                                var lat = latSum / a.length;
                                let lngSum = 0;
                                for (let i in b) {
                                    lngSum += b[i];
                                }
                                var lng = lngSum / b.length;
                                var machPolygon = new AMap.Polygon({
                                    path: path,
                                    strokeColor: "#ff00ff",
                                    strokeWeight: 6,
                                    strokeOpacity: 0.2,
                                    fillOpacity: 0.4,
                                    fillColor: "#ff00ff",
                                    zIndex: 50
                                });
                                var machMap = new AMap.Map("fenceMap2", {
                                    zoom: 14,
                                    center: [lng, lat]
                                });
                            } else if (_that.type == 2) {
                                var lat = _that.centerPoint.lat;
                                var lng = _that.centerPoint.lng;
                                var radius = _that.radius;
                                var machCircle = new AMap.Circle({
                                    center: [lng, lat],
                                    radius: radius, //半径
                                    borderWeight: 3,
                                    strokeColor: "#ff00ff",
                                    strokeWeight: 6,
                                    strokeOpacity: 0.2,
                                    fillOpacity: 0.4,
                                    strokeStyle: "dashed",
                                    strokeDasharray: [10, 10],
                                    // 线样式还支持 'dashed'
                                    fillColor: "#ff00ff",
                                    zIndex: 50
                                });
                                var machMap = new AMap.Map("fenceMap2", {
                                    zoom: 14,
                                    center: [lng, lat]
                                });
                            }
                            //标记设备的区域
                            var marker;
                            marker = new AMap.Marker({
                                map: machMap,
                                icon: new AMap.Icon({
                                    image: res.data.icon,
                                    size: new AMap.Size(64, 64), //图标大小
                                    imageSize: new AMap.Size(32, 32)
                                }),
                                // icon:require("./../../assets/images/emp/warn/wjj_0.png"),
                                position: [res.data.lng, res.data.lat],
                                offset: new AMap.Pixel(-13, -30)
                            });
                            var mouseTool = new AMap.MouseTool(machMap);
                            // 构造官方卫星、路网图层
                            var satelliteLayer = new AMap.TileLayer.Satellite();
                            var roadNetLayer = new AMap.TileLayer.RoadNet();
                            //添加图层
                            machMap.add([satelliteLayer, roadNetLayer]);
                            if (_that.type == 1) {
                                machMap.add(machPolygon);
                                // 缩放地图到合适的视野级别
                                machMap.setFitView([machPolygon]);
                            } else if (_that.type == 2) {
                                // circle.setMap(map);
                                machMap.add(machCircle);
                                // 缩放地图到合适的视野级别
                                machMap.setFitView([machCircle]);
                            }
                        }
                        // 经纬度转坐标
                        AMap.service("AMap.Geocoder", function () {
                            //回调函数
                            //实例化Geocoder
                            var geocoder = new AMap.Geocoder({
                                city: "", //城市，默认:“全国”
                                radius: 1000,
                                extensions: "all"
                            });
                            var lnglatXY = [res.data.lng, res.data.lat]; //地图上所标点的坐标
                            // var lnglatXY = [114.29484, 30.592335]; //地图上所标点的坐标
                            geocoder.getAddress(lnglatXY, function (status, result) {
                                if (status === "complete" && result.info === "OK") {
                                    //获得了有效的地址信息:
                                    //即，result.regeocode.formattedAddress
                                    var city = result.regeocode.formattedAddress;
                                } else {
                                    var city = "暂无位置信息";
                                    //获取地址失败
                                }
                                _that.ads = city;
                            });
                        });
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //电子围栏报警区域
        ok(type) {
            if (type == 0) {
                if (this.handleRemark == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写报警原因"
                    });
                    return;
                }
                if (this.handleResult == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写处理结果"
                    });
                    return;
                }
                this.handleFlag = false;
            } else if (type == 1) {
                if (this.allhandleRemark == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写报警原因"
                    });
                    return;
                }
                if (this.allhandleResult == "") {
                    this.$Modal.warning({
                        title: "您有必填字段",
                        content: "请填写处理结果"
                    });
                    return;
                }
                this.handleFlag = true;
            }
            this.Modal = true;
        },
        submit() {
            if (!this.handleFlag) {
                let parmas = {
                    warnId: this.warnId,
                    handleResult: this.handleResult,
                    handleRemark: this.handleRemark
                };
                getEmpRecordHandle(parmas)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.pageNum = 1;
                            this.current = 1;
                            this.getAllList();
                            this.getEmpRecordNumFn();
                            this.initDataFn();
                            this.handleModal = false;
                            this.Modal = false;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            } else {
                let parmas = {
                    warnIdList: this.warnIdList,
                    handleResult: this.allhandleResult,
                    handleRemark: this.allhandleRemark
                };
                getEmpRecordBatchHandle(parmas)
                    .then(res => {
                        if (res.code == 200) {
                            this.$Message.success("操作成功");
                            this.pageNum = 1;
                            this.current = 1;
                            this.getAllList();
                            this.getEmpRecordNumFn();
                            this.initDataFn();
                            this.allhandleModal = false;
                            this.Modal = false;
                        } else {
                            this.$Message.warning(res.msg);
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    });
            }

        },
        cancel(type) {
            if (type == 0) {
                this.handleModal = false;
            } else if (type == 1) {
                this.Modal = false;
            } else if (type == 3) {
                this.allhandleModal = false;
            }
        },
        handleSelectionChange(val) {
            this.warnIdList = [];
            val.forEach(i => {
                this.warnIdList.push(i.warnId)
            })
        },
        allhandle() {
            this.allhandleResult = "";
            this.allhandleRemark = "";
            this.allhandleModal = true;
        },
        initDate() {
            let newDate = new Date();
            let oldDate = new Date();
            oldDate = new Date(oldDate.setDate(newDate.getDate() - 6));
            let y = newDate.getFullYear();
            let m = newDate.getMonth() + 1; //获取当前月份(0-11,0代表1月，所以要加1);
            let d = newDate.getDate(); //获取当前日（1-31）
            let h = newDate.getHours();
            let minut = newDate.getMinutes();
            let s = newDate.getSeconds();
            let yy = oldDate.getFullYear();
            let mm = oldDate.getMonth() + 1; //获取当前月份(0-11,0代表1月，所以要加1);
            let dd = oldDate.getDate(); //获取当前日（1-31）
            let hh = oldDate.getHours();
            let minut_M = oldDate.getMinutes();
            let ss = oldDate.getSeconds();
            m = m < 10 ? "0" + m : m;
            d = d < 10 ? "0" + d : d;
            h = h < 10 ? "0" + h : h;
            s = s < 10 ? "0" + s : s;
            ss = ss < 10 ? "0" + ss : ss;
            minut = minut < 10 ? "0" + minut : minut;
            minut_M = minut_M < 10 ? "0" + minut_M : minut_M;
            hh = hh < 10 ? "0" + hh : hh;
            mm = mm < 10 ? "0" + mm : mm;
            dd = dd < 10 ? "0" + dd : dd;
            let startDate = yy + "-" + mm + "-" + dd + ' ' + hh + ':' + minut_M + ':' + ss;
            let endDate = y + "-" + m + "-" + d + ' ' + h + ':' + minut + ':' + s;
            this.dateArr = [startDate, endDate]
            this.getAllList();
            this.initDataFn();
            this.getEmpRecordNumFn();
        },
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";

.empWarnrecord {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .search {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        background:#fff;
        padding: 10px;
        box-sizing: border-box;
        .left{
            width: 50%;
            /deep/ .ivu-tabs-bar{
                width: 100%;
                margin: 0 auto;
                border: none;
            }
        }
    }
    .tabBox{
        width:100%;
        margin-top: 10px;
        padding: 20px;
        background-color: #fff;
        border-radius: 10px;
        box-sizing: border-box;
        .boxList{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .item{
                width: 160px;
                height: 90px;
                background: #FCFDFF;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border: 1px solid var(--themeColor);
                box-sizing: border-box;
                cursor: pointer;
                &:hover {
                    transform: scale( 1.05);
                    transition: all 0.5s;
                    box-shadow: 0 4px 8px rgba(46,104,253,.12);
                }
                &.machRuleType{
                    background-color: #eee;
                    color: #fff;
                }
                .left{
                    width: 50px;
                    height: 50px;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                .right{
                    margin-left: 10px;
                    flex: 1;
                    .p{
                        width: 80px;
                        font-weight: 500;
                        letter-spacing: 2px;
                        font-size: 14px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #181818;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        &:last-of-type{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        }
                        .num{
                            font-size: 24px;
                        }
                    }
                }

            }
        }
        .tableList{
            margin-top: 10px;
            /deep/ .el-table{
                color: #181818;
                font-family: MicrosoftYaHei;
                font-size: 14px;
                td,
                th.is-leaf{
                    border-bottom: none;
                }
                tr{
                    border: none;
                }
                thead th{
                    color: #666666;
                    font-weight: 400;
                }
            }
            /deep/ .el-table__row{
                background-color: #fff;
                cursor: pointer;
            }
            /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td{
                background-color: #F3F6FD ;
                cursor: pointer;
            }
        }
    }
}

.active {
    background: var(--themeColor) !important;
    border: var(--themeColor) !important;
    color: #fff !important;
}
#container2 {
    height: 100%;
}
#fenceMap2 {
    height: 100%;
}
</style>
